{extends 'base/site2.html'}
{block name="page_header"}{include file="common/header.html" inline}{/block}
{block name="page_nav"}{include file="common/slide-nav.html" inline}{/block}
{block name="page_styles"}
    <link rel="stylesheet" type="text/css"
          href="/css/mediation/caseinfo/caseinfo.css"/>
    <style>
        .switch-item {
            font-size: 18px;
            position: relative;
            cursor: pointer;
            margin-right: 40px;
            margin-bottom: 20px;
        }

        .switch-item:last-child {
            margin-right: 0;
        }

        .switch-item:hover {
            color: #1474FA;
        }

        .switch-item span {
            position: absolute;
            left: 50%;
            bottom: -6px;
            width: 75px;
            height: 2px;
            background: transparent;
            transform: translate(-50%, 0);
        }

        .switch-item.active {
            /* color: #3c5dbd; */
        }

        .switch-item.active span {
            background: #1474FA;;
        }


        .case-info-list {
            float: left;
            width: 42%;
            padding-bottom: 20px;
            font-size: 15px;
            padding-left: 100px;
        }
    </style>
    <style>
        .sv-timeline {
            font-size: 14px;
            list-style: none;
        }

        .sv-timeline-item {
            position: relative;
            padding-bottom: 26px;
        }

        /* .sv-timeline-item__tail {
            position: absolute;
            left: 5px;
            border-left: 2px solid rgb(11, 189, 135);
            top: 13px;
            bottom: 0;
        }

        .sv-timeline-item__node--primary {
            background-color: #409eff;
        }

        .sv-timeline-item__node--large {
            left: -2px;
            width: 14px;
            height: 14px;
        }

        .sv-timeline-item__content {
            color: #303133;
        }

        .sv-timeline-item__timestamp.is-bottom {
            color: #666;
            font-size: 14px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            position: absolute;
            left: -140px;
            top: 3px;
        }

        .sv-timeline-item__timestamp {
            color: #909399;
            line-height: 1;
            font-size: 13px;
        }

        .sv-timeline-item__wrapper {
            position: relative;
            padding-left: 22px;
            top: -2px;
        }

        .sv-timeline-item__node--normal {
            left: -1px;
            width: 12px;
            height: 12px;
        }

        .sv-timeline-item__node {
            position: absolute;
            border: rgb(11, 189, 135) 1px solid;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        } */

        .sv-timeline-item__node > div {
            width: 8px;
            height: 8px;
            background-color: #1474FA;
            border-radius: 50%;
        }

        .sv-timeline-item__wrapper {
            display: flex;
        }


        .repayment-plan {
            width: 100%;
        }

        .repayment-plan td {
            padding: 10px 0;
        }

        .repayment-plan th, .repayment-plan td {
            text-align: center;
        }
        .sv-timeline-item .step {
          height: 100%;
          position: absolute;
          left: 160px;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .sv-timeline-item .step .sv-timeline-item__tail {
          flex: 1;
          border-left: 2px solid #1474FA;
        }
        .sv-timeline-item .step .sv-timeline-item__node {
          border: #1474FA 1px solid;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .sv-timeline-item .sv-timeline-item__wrapper {
          /* padding-left: 22px; */
          display: flex;
        }
        .sv-timeline-item .sv-timeline-item__wrapper .sv-timeline-item__timestamp.is-bottom {
          color: #666;
          font-size: 14px;
          margin-right: 22px;
          white-space: nowrap;
          width: 150px;
        }
        .sv-timeline-item .sv-timeline-item__wrapper .sv-timeline-item__timestamp {
          color: #909399;
          line-height: 1;
          font-size: 13px;
        }
        .sv-timeline-item .sv-timeline-item__wrapper .sv-timeline-item__content {
          color: #303133;
          flex: 1;
          text-align: left;
        }
    </style>
{/block}

{block name="page_section"}
    <div class="sessionPage">
        <ol class="breadcrumb pad-no" style="width:95%;margin:0 auto;height:50px;line-height:50px;">
            <a href="javascript:;" onclick="history.go(-1)" style="margin-right:20px;">
                <i class="glyphicon glyphicon-menu-left"></i>
                返回
            </a>
            <li class="active">案件详情</li>
        </ol>
        <div>
            <input type="hidden" name="caseId" value="{$smarty.get.caseId}">
            <div style="display:flex;justify-content: center;padding: 15px 0 5px;border-bottom:1px solid #ccc;margin-bottom:20px;">
                <span class="switch-item active">案件信息<span></span></span>
                <span class="switch-item" data-type="mediationLog">调解历史<span></span></span>
                <span class="switch-item" data-type="sMSLog">短信记录<span></span></span>
                <span class="switch-item" data-type="operateLog">操作日志<span></span></span>
                <span class="switch-item" data-type="returnedPlan">还款计划<span></span></span>
            </div>
            <div style="height:calc(100vh - 120px);overflow-y:scroll;text-align: center;">
                <div class="show-table" style="">
                    <div class="clerfix">
                        {foreach from=$showFields key=key item=filed}
                            <div class="case-info-list">{$key}：{$filed}</div>
                        {/foreach}
                    </div>
                </div>

                <div class="show-table" style="display:none;">
                    <ul class="sv-timeline getMediationLog" style="width:90%;margin: 0 auto;">

                    </ul>
                </div>
                <div class="show-table" style="display:none;">
                    <ul class="sv-timeline getSMSLog" style="width:90%;margin: 0 auto;">

                    </ul>
                </div>
                <div class="show-table" style="display:none;">
                    <ul class="sv-timeline getOperateLog" style="width:90%;margin: 0 auto;">

                    </ul>
                </div>
                <style>
                    .repayment-plan {
                        width: 100%;
                    }

                    .repayment-plan td {
                        padding: 10px 0;
                    }

                    .repayment-plan th, .repayment-plan td {
                        text-align: center;
                    }
                </style>
                <div class="show-table" style="display:none;">
                    <table class="repayment-plan">
                        <thead>
                        <tr>
                            <th>期数</th>
                            <th>还款日期</th>
                            <th>还款金额（元）</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody class="getReturnedPlan">

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
{/block}
{block name="page_scripts"}
    <script type="text/javascript" src="/js/mediation/caseinfo/index.min.js"
            init="mediation/caseinfo/index"></script>
    <script type="text/javascript">

        $('body').on('click', '.switch-item', function () {
            var type = $(this).attr('data-type');
            if (type == 'mediationLog') {
                $.ajax({
                    url: "/caseinfo/getMediationLog",
                    method: "post",
                    data: {
                        caseId: $('[name="caseId"]').val(),
                    },
                    success: function (res) {
                        if (res.code == 200) {
                            if (res.data.length) {
                                var hml = '';
                                $.each(res.data, function (index, val) {
                                    hml += `
                                    <li class="sv-timeline-item">
                                    <div class="step">
                                      <div class="sv-timeline-item__node sv-timeline-item__node--normal sv-timeline-item__node--">
                                        <div></div>
                                      </div>
                                      <div class="sv-timeline-item__tail"></div>
                                    </div>
                                        <div class="sv-timeline-item__wrapper">
                                            <div class="sv-timeline-item__timestamp is-bottom">`+val.addTime+`</div>
                                            <div class="sv-timeline-item__content">
                                                <div style="color:#666">`+val.mediatorName+`&nbsp;`+val.type+` `+val.mobile+`&nbsp;【`+val.mediateResult+`】</div>
                                    `;
                                    if (val.nextTime) {
                                        hml += `<div style="margin-top: 5px;">联系计划：`+val.nextTime+`</div>`;
                                    }
                                    hml += `<div style="margin-top: 5px;">`+val.desc+` </div>`;
                                    if (val.fileName) {
                                        hml += `<div><audio controls="controls" src="`+val.fileName+`" style="width: 220px;height: 36px;margin-top: 10px;"></audio></div>`;
                                    }
                                    ` </div>
                                        </div>
                                    </li>
                                `;
                                })
                                $('.getMediationLog').html(hml);
                            } else {
                                $('.getMediationLog').html('<div class="show-table table_connect_noData" style="height: 100%;text-align:center;position: absolute;width: 100%;left: 50%;transform: translate(-50%);"><p style="margin-top:5%;"><img src="/images/news/index/noData.png" alt=""></p><p style="padding-top:10px;font-size: 14px;color: #86909C;">暂无数据</p></div>');
                            }
                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function (err) {
                        toastr.error('网络错误,请稍后重试');
                    }
                })
            } else if (type == 'sMSLog') {
                $.ajax({
                    url: "/caseinfo/getSMSLog",
                    method: "post",
                    data: {
                        caseId: $('[name="caseId"]').val(),
                    },
                    success: function (res) {
                        if (res.code == 200) {
                            if (res.data.length) {
                                var hml = '';
                                $.each(res.data, function (index, val) {
                                    hml += `
                                    <li class="sv-timeline-item">
                                        <div class="step">
                                          <div class="sv-timeline-item__node sv-timeline-item__node--normal sv-timeline-item__node--">
                                            <div></div>
                                          </div>
                                          <div class="sv-timeline-item__tail"></div>
                                        </div>
                                        <div class="sv-timeline-item__wrapper">
                                            <div class="sv-timeline-item__timestamp is-bottom">`+val.sendTime +`</div>
                                            <div class="sv-timeline-item__content">
                                                <div style="color:#666">`+val.mediator+`&nbsp;`+val.mobile+`【`+val.scene+`】`+val.sendStatus+`</div>
                                                <div style="margin-top: 5px;">`+val.content+` </div>
                                            </div>
                                        </div>
                                    </li>
                                `;
                                })
                                $('.getSMSLog').html(hml);
                            } else {
                                $('.getSMSLog').html('<div class="show-table table_connect_noData" style="height: 100%;text-align:center;position: absolute;width: 100%;left: 50%;transform: translate(-50%);"><p style="margin-top:5%;"><img src="/images/news/index/noData.png" alt=""></p><p style="padding-top:10px;font-size: 14px;color: #86909C;">暂无数据</p></div>');
                            }
                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function (err) {
                        toastr.error('网络错误,请稍后重试');
                    }
                })
            } else if (type == 'operateLog') {
                $.ajax({
                    url: "/caseinfo/getOperateLog",
                    method: "post",
                    data: {
                        caseId: $('[name="caseId"]').val(),
                    },
                    success: function (res) {
                        if (res.code == 200) {
                            if (res.data.length) {
                                var hml = '';
                                $.each(res.data, function (index, val) {
                                    hml += `
                                    <li class="sv-timeline-item">
                                        <div class="step">
                                          <div class="sv-timeline-item__node sv-timeline-item__node--normal sv-timeline-item__node--">
                                            <div></div>
                                          </div>
                                          <div class="sv-timeline-item__tail"></div>
                                        </div>
                                        <div class="sv-timeline-item__wrapper">
                                            <div class="sv-timeline-item__timestamp is-bottom">` + val.createTime + `</div>
                                            <div class="sv-timeline-item__content">
                                                <div style="color:#666">` + val.operationName + `&nbsp;` + val.operationContent + `</div>
                                                <div style="margin-top: 5px;">` + val.remark + ` </div>
                                            </div>
                                        </div>
                                    </li>
                                `;
                                })
                                $('.getOperateLog').html(hml);
                            } else {
                                $('.getOperateLog').html('<div class="show-table table_connect_noData" style="height: 100%;text-align:center;position: absolute;width: 100%;left: 50%;transform: translate(-50%);"><p style="margin-top:5%;"><img src="/images/news/index/noData.png" alt=""></p><p style="padding-top:10px;font-size: 14px;color: #86909C;">暂无数据</p></div>');
                            }
                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function (err) {
                        toastr.error('网络错误,请稍后重试');
                    }
                })
            } else if (type == 'returnedPlan') {
                $.ajax({
                    url: "/caseinfo/getReturnedPlan",
                    method: "post",
                    data: {
                        caseId: $('[name="caseId"]').val(),
                    },
                    success: function (res) {
                        if (res.code == 200) {
                            if (res.data.length) {
                                var hml = '';
                                $.each(res.data, function (index, val) {
                                    hml += `
                                    <tr>
                                        <td>`+val.term+`</td>
                                        <td>`+val.repaymentDate+`</td>
                                        <td>`+val.repayAmount+`</td>
                                        <td>`+val.status+`</td>
                                    </tr>
                                    `;
                                })
                                $('.getReturnedPlan').html(hml);
                            } else {
                                $('.getReturnedPlan').html('<div class="show-table table_connect_noData" style="height: 100%;text-align:center;position: absolute;width: 100%;left: 50%;transform: translate(-50%);"><p style="margin-top:5%;"><img src="/images/news/index/noData.png" alt=""></p><p style="padding-top:10px;font-size: 14px;color: #86909C;">暂无数据</p></div>');
                            }
                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function (err) {
                        toastr.error('网络错误,请稍后重试');
                    }
                })
            }

        })
    </script>
{/block}
